<template>
  <!-- 添加商品 -->
  <div class="lfy_add_box">
    <div style="height: 20px;"></div>
    <i class="el-icon-arrow-left" @click="backEdit"></i>
    <div class="add_container">
      <!--  -->
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        label-position="left"
      >
        <!--  -->
        <el-form-item label="排序">
          <el-input class="sort_input_width" v-model="form.sort"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="选择商品">
          <el-input class="sort_input_width" v-model="form.choose"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="所属会场">
          <el-select
            class="input_width"
            v-model="form.huichang"
            placeholder="极致睿成秒杀"
          >
            <el-option label="极致睿成秒杀" value="shanghai"></el-option>
            <el-option label="极致睿成秒杀" value="shanghai"></el-option>
            <el-option label="极致睿成秒杀" value="shanghai"></el-option>
            <el-option label="极致睿成秒杀" value="shanghai"></el-option>
            <el-option label="极致睿成秒杀" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!--  -->
        <el-form-item label="分类">
          <el-select
            class="input_width"
            v-model="form.fenlei"
            placeholder="中药"
          >
            <el-option label="中药" value="shanghai"></el-option>
            <el-option label="西药" value="beijing"></el-option>
            <el-option label="分组1" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!--  -->
        <el-form-item label="原价">
          <el-input
            class="input_width border_radius"
            v-model="form.currentPrice"
          ></el-input>
          <span class="yuan">元</span>
        </el-form-item>
        <!--  -->
        <el-form-item label="库存">
          <el-input class="input_width" v-model="form.kucun"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item class="mar_bottom" label="详情">
          <el-input
            class="details_input_width"
            type="textarea"
            v-model="form.details"
          ></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item>
          <el-button class="submit_btn" type="primary" @click="addgoods">
            确定
          </el-button>
          <span class="back_goods" @click="backEdit">返回商品列表</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { addlfygoods } from '../../api/index'
export default {
  // 表单
  data() {
    return {
      form: {
        sort: '',
        choose: '',
        huichang: '',
        fenlei: '',
        price: '',
        kucun: '',
        details: '',
      },
    }
  },
  methods: {
    // 表单

    // 路由
    // 返回商品
    backEdit() {
      this.$router.push('/backGoods')
    },
    // 添加商品
    addgoods() {
      var obj = {
        sort: this.form.sort,
        currentPrice: this.form.currentPrice,
        huichang: this.form.huichang,
        pay: this.form.kucun,
      }

      addlfygoods(obj).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.backEdit()
        }
      })
    },
  },
}
</script>
<style lang="scss">
* {
  box-sizing: border-box;
}

.lfy_add_box {
  padding: 0 30px;
}

.el-icon-arrow-left {
  font-size: 20px;
}

.add_container {
  padding-left: 30px;
}
.input_width {
  width: 20%;
}
.yuan {
  display: inline-block;
  // width: 40px;
  height: 40px;
  border: 1px solid #dcdfe6;
  text-align: center;
  padding: 0 10px;
}
.el-input__inner {
  border-radius: 0;
}
.sort_input_width {
  width: 70%;
}
.details_input_width {
  width: 75%;
}
.el-textarea__inner {
  height: 150px;
}

.el-form-item {
  margin-bottom: 40px;
}
.mar_bottom {
  margin-bottom: 60px;
}

.back_goods {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgb(187, 187, 187);
  border-radius: 4px;
  color: #101010;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0 10px;
  margin-left: 30px;
}
</style>
